export default {
	name: "bgsxform",
	dependencies: ['./kzhedit.js'], // 依赖声明
	props: {
		xmlist: {type: Array,required: true},
		mblist: {type: Array,required: true},
		zsmblist: {type: Array,required: true},
		tbyoptions: {type: Array, required: true},
		shyoptions: {type: Array, required: true},
		formData: {
			type: Object,
			required: true,
			validator: (value) => {
				return value !== null && typeof value === 'object'
			}
		},
	},
	setup(props, { emit }) {
		const router = VueRouter.useRouter();
		const { smartSpeak } = inject('speech'); //语音
		const newbgsx = ref(JSON.parse(JSON.stringify(props.formData)));
		const xmid = ref(0);
		const userform = ref();
		const zdoption = ref([]);
		const at = ref('');
		const activeName = ref('first');//默认tab
		const uploadUrl = ref('');
		const kboption = ref([]);
		const jsonkeys = ref(['muselect', 'checkbox', 'multiimage', 'subtable', 'multifile', 'video']);
		const zblx = {
			text: '单行文本',
			textarea: '多行文本',
			select: '单选下拉',
			date: '日期',
			datetime: '日期时间',
			mobile: '手机号',
			idcard: '身份证号',
			number: '数字',
		};
		const formRef = ref();
		const rules = reactive({
			formname: [{required: true, message: '请输入查询名称'},{min: 2,max: 200,message: '查询名称字数限制在2和200之间'}],
			kfcx: [{required: true,message: '请选择显示列'}],
			qtxs: [{required: true,message: '请选择前台显示条件'}],
			fields: [
			    {required: true,message: '请设置字段'},
				{
					validator: (rule, value, callback) => {
						const temp = value || {};
						if (Object.keys(temp).length === 0) {
							callback(new Error('至少需要设置一个字段'));
							return;
						}
						for (const [fieldKey, config] of Object.entries(temp)) {
							// 字段名称校验
							if (!config.name?.trim()) {
								callback(new Error(`${fieldKey} 字段名称不得为空`));
								return;
							}
							// multiimage 类型校验
							if (['multiimage', 'multifile', 'video'].includes(config.type) && !config.max) {
								callback(new Error(`${config.name} 数量限制不得为空`));
								return;
							}
							// 选项类型校验
							if (['select', 'muselect', 'radio', 'checkbox'].includes(config.type) && !config.options) {
								callback(new Error(`${config.name} 选项不得为空`));
								return;
							}
							// 查询条件冲突校验
							if (['image', 'multiimage', 'textarea','video', 'file', 'multifile', 'muselect', 'checkbox', 'subtable'].includes(config.type) && newbgsx.value.cxtj?.includes(fieldKey)
							) {
								callback(new Error(`${config.name} 图片视频文件、多选、多行文本和子表不能作为查询条件`));
								return;
							}
                            // 字段显示条件验证
                            if (config.conditions && Object.keys(config.conditions).length) {
                                if (!config.conditions.field) {
                                    callback(new Error(`${config.name} 的条件字段不能为空`));
                                    return;
                                }
                                if (!config.conditions.value) {
                                    callback(new Error(`${config.name} 的条件值不能为空`));
                                    return;
                                }
                                if (config.conditions.action != "show" && config.conditions.action != "hide") {
                                    callback(new Error(`${config.name}无效的条件动作`));
                                    return
                                }
                            }
						}
						callback();
					}
				}
			],
			// 流程相关验证
			processConfig: [{
				validator: (rule, value, callback) => {
					const steps = newbgsx.value.processConfig;
					if (steps?.length > 0) {
						const stepNumbers = new Set();
						for (const step of steps) {
							if (!step.name?.trim()) {
								callback(new Error("步骤名称不能为空"));
								return;
							}
							if (!step.approverId) {
								callback(new Error("请选择审批人"));
								return;
							}
							if (stepNumbers.has(step.step)) {
								callback(new Error("步骤序号重复"));
								return;
							}
							stepNumbers.add(step.step);
						}
					}
					callback();
				}
			}],

			// 预约相关校验规则
			'reservation.mode': {
				required: true,
				message: '请选择预约模式'
			},
			'reservation.maxDays': [{
				validator: (rule, value, callback) => {
					if (newbgsx.value.reservation.mode === 'dynamic' && !value) {
						callback(new Error('动态模式必须设置最大天数'))
					} else {
						callback()
					}
				}
			}],
			'reservation.allowedDates': [{
					validator: (rule, value, callback) => {
						if (
							['static', 'custom'].includes(newbgsx.value.reservation.mode) && value.length === 0
						) {
							callback(new Error('静态/自定义模式必须配置允许日期'))
						} else {
							callback()
						}
					}
				},
				{
					validator: (rule, value, callback) => {
						const invalidDates = value.filter(item =>
							!/^\d{4}-\d{2}-\d{2}$/.test(item.date)
						)
						if (invalidDates.length > 0) {
							callback(new Error(`日期格式错误：${invalidDates.map(d => d.date).join(', ')}`))
						} else {
							callback()
						}
					}
				},
                // 新增自定义模式时段校验
                {
                    validator: (rule, value, callback) => {
                        if (newbgsx.value.reservation.mode !== 'custom') return callback()
                        const errors = []
                        value.forEach((dateSlot, index) => {
                            // 校验必须有时段
                            if (!dateSlot.timeSlots || dateSlot.timeSlots.length === 0) {
                                errors.push(`日期[${dateSlot.date}]必须配置时段`)
                            }
                            // 校验人数必须>0
                            if (dateSlot.timeSlots) {
                                dateSlot.timeSlots.forEach((slot, slotIndex) => {
                                    if (slot.maxPeople <= 0) {
                                        errors.push(`日期[${dateSlot.date}]时段${slotIndex+1}人数需大于0`)
                                    }
                                })
                            }
                        })
                        if (errors.length > 0) {
                            callback(new Error(errors.join('；')))
                        } else {
                            callback()
                        }
                    }
                }
			],
			'reservation.timeSlots': [
			    {
				    validator: (rule, value, callback) => {
				        if (newbgsx.value.reservation.mode == 'custom') return callback(); //自定义模式不校验
						if (value.length === 0) {
							callback(new Error('必须配置至少一个时间段'))
							return
						}
						callback()
					}
				},
				{
					validator: (rule, value, callback) => {
					    if (newbgsx.value.reservation.mode == 'custom') return callback(); //自定义模式不校验
                        // 检查时间段重复
                        const slots = value.map(s => `${s.start}-${s.end}`);
                        if (new Set(slots).size !== slots.length) {
                            callback(new Error('存在重复时间段配置'));
                            return;
                        }
                        // 检查时间段有效性
                        const invalidSlots = value.filter(slot => {
                            const start = window.moment(slot.start, "HH:mm");
                            const end = window.moment(slot.end, "HH:mm");
                            return !end.isAfter(start);
                        });
                        if (invalidSlots.length > 0) {
                            callback(new Error(
								`时间段配置错误：第${invalidSlots.map(s => value.indexOf(s)+1).join(',')}项的结束时间需晚于开始时间`
							))
                            return;
                        }
                        callback();
					}
				},
				{
					validator: (rule, value, callback) => {
						const invalidPeople = value.filter(slot => slot.maxPeople <= 0)
						if (invalidPeople.length > 0) {
							callback(new Error('最大人数必须大于0'))
						} else {
							callback()
						}
					}
				}
			]
		});
		
		onMounted(() => {
			initFormData(newbgsx.value);
		});
		
		const initFormData = async(newData) => {
			// 辅助函数处理无效日期
			const handleInvalidDate = (dateStr) => {
				return (!dateStr || dateStr === '0001-01-01T00:00:00Z') ? null : dateStr;
			};
			// 移除不需要的字段 
			const { id = null, createdAt, updatedAt, createdBy, ...rest } = newData;
			xmid.value = Number(id) || 0; // 确保数值类型
			newbgsx.value = { ...rest };
			// 处理日期字段 
			newbgsx.value.starttime = handleInvalidDate(newbgsx.value.starttime);
			newbgsx.value.endtime = handleInvalidDate(newbgsx.value.endtime);
			newbgsx.value.dblcxx = newbgsx.value.dblcxx || []; // 初始化dblcxx 
			newbgsx.value.kfcx = newbgsx.value.kfcx || [];
			newbgsx.value.kftb = newbgsx.value.kftb || [];
			newbgsx.value.tby = newbgsx.value.tby || [];
			newbgsx.value.pxzd = newbgsx.value.pxzd || [];
			newbgsx.value.qtxs = newbgsx.value.qtxs || '全开放';
			newbgsx.value.remark = newbgsx.value.remark || [{f: false, type: 'text',value: ''}]; // 初始化备注
			//初始化流程
            if (!newbgsx.value.processConfig) {
    			newbgsx.value.processConfig = [];
    		}
            // 初始化预约配置
            newbgsx.value.reservation = newData.reservation || {
                mode: 'dynamic',
                maxDays: 7,
                allowedDates: [],
                timeSlots: [],
                extensions: {},
                allowMultiple: true
            }
			processFieldOptions();
		}
		
        // 添加日期项时初始化结构
        const addDateSlot = () => {
            const baseSlot = { 
                date: '',
                // 自定义模式初始化时段数组
                timeSlots: newbgsx.value.reservation.mode === 'custom' ? [{start: '09:00',end: '10:00',maxPeople: 0}] : []
            }
            newbgsx.value.reservation.allowedDates.push(baseSlot)
        }
        
        // 添加时间段
        const addTimeSlot = () => {
            newbgsx.value.reservation.timeSlots.push({
                start: '09:00',
                end: '10:00',
                maxPeople: 0
            })
        }
        
        const removeDateSlot = (index) => {
            newbgsx.value.reservation.allowedDates.splice(index, 1)
        }
        
        const removeTimeSlot = (index) => {
            newbgsx.value.reservation.timeSlots.splice(index, 1)
        }
        
        // 添加自定义模式的日期时段
        const addDateTimeSlot = (dateIndex) => {
            newbgsx.value.reservation.allowedDates[dateIndex].timeSlots.push({start: '09:00',end: '10:00',maxPeople: 0})
        }
        
        // 删除自定义模式的日期时段
        const removeDateTimeSlot = (dateIndex, timeIndex) => {
            newbgsx.value.reservation.allowedDates[dateIndex].timeSlots.splice(timeIndex, 1)
        }
        
        // 切换模式时重置数据
        watch(() => newbgsx.value.reservation?.mode, (newVal) => {
            if (newVal === 'static') {
                // 静态模式清空自定义时段
                newbgsx.value.reservation.allowedDates.forEach(d => delete d.timeSlots)
                // 初始化全局时段
                if (!newbgsx.value.reservation.timeSlots.length) {
                    addTimeSlot()
                }
            } else if (newVal === 'custom') {
                // 自定义模式清空全局时段
                newbgsx.value.reservation.timeSlots = []
                // 初始化第一个时段
                newbgsx.value.reservation.allowedDates.forEach(d => {
                    d.timeSlots = d.timeSlots?.length ? d.timeSlots : [{start: '09:00',end: '10:00',maxPeople: 0}]
                })
            }
        })
		
		watch(() => props.formData,
			(newVal) => {
				if (!_.isEqual(newVal, newbgsx.value)) {
					initFormData(newVal);
				}
			},
			{ deep: true, }
		);
		
		//表单校验
		const submitForm = _.debounce(async() => {
			try {
				const valid = await formRef.value.validate();
				if (!valid) {
					return;
				}
				const res = newbgsx.value;
				// 统一处理数据格式
				const { starttime, endtime, dblc, dblcxx } = res;
				res.starttime = starttime || null;
				res.endtime = endtime || null;
				// 时间范围校验
				if (isTimeInvalid(starttime, endtime)) {
					smartSpeak('结束时间不能比开始时间早');
					ElMessage.error('结束时间不能比开始时间早');
					return;
				}
				// 多表联查校验
				const multiTableError = validateMultiTable(dblc, dblcxx);
				if (multiTableError) {
					ElMessage.error(multiTableError);
					return;
				}
				if (dblc && res.cxtj.length > 1) {
					smartSpeak('多表联查只支持一个查询条件')
					ElMessage.error('多表联查只支持一个查询条件');
					return
				}
				//流程如果存在，则统一添加创建者姓名
				if (newbgsx.value.processConfig?.length) {
				    newbgsx.value.processConfig = newbgsx.value.processConfig.map(step => ({
                        ...step,
                        approverName: props.shyoptions.find(u => u.value === step.approverId)?.label || ''
                    }))
				}
				for(let k in res.fields) {
				    res.fields[k].color = res.fields[k].color || '#000000';
				}
				// 提交表单
				handleUpdate(res);
			} catch (error) {
				console.error('表单验证失败:', error);
				ElMessage.error('表单验证失败，请检查输入');
				smartSpeak('表单验证失败');
			}
		}, 300);
		
		//修改项目
		const handleUpdate = async () => {
			let data = JSON.parse(JSON.stringify(newbgsx.value));
			data.id = xmid.value;
			const res = await updatebgsx(data);
			ElMessage.success('修改成功');
			setTimeout(() => {
				closeDialog();
				emit('update-success'); // 触发父组件更新
			}, 500);
		}
		
		//删除项目
		const delbgsx = async () => {
			try {
				const confirmResult = await ElMessageBox.confirm('删除项目后数据不可恢复','确认要删除？',{ type: 'warning' });
				if (confirmResult === 'confirm') {
					var res = await delbgsxapi(newbgsx.value);
					if (res.code === 0) {
						ElMessage.success(res.message);
						setTimeout(() => {
							emit('call-init'); //刷新数据
							init();
						}, 500);
					} else {
						ElMessage.error(res.message);
					}
				} 
			} catch (error) {
				if (error === 'cancel') {
					console.log('用户取消了操作');
				} else {
					ElMessage.error('发生错误: ' + error.message);
				}
			}
		}

		// 字段处理方法
		const processFieldOptions = () => {
			if(!newbgsx.value.fields) return;
			const fields = Object.keys(newbgsx.value.fields).reduce((acc, fieldKey) => {
				const field = newbgsx.value.fields[fieldKey];
				if(!field.conditions) field.conditions = {};
				// 身份证字段默认配置初始化 
				if (field.type === 'idcard' && !field.sfzoptions) {
					field.sfzoptions  = { name: '', sex: '', mz: '', day: '', ade: '', old: '' };
				}
				//子表
				if (field.type === 'subtable' && !field.zboptions) {
					field.zboptions  = [];
				}
				acc.push({
					label: field.name,
					value: fieldKey
				});
				return acc;
			}, []);
			zdoption.value = fields;
		};

		// 添加字段
		const addField = () => {
			const newKey = generateFieldKey();
			const newField = createNewField(newKey);
			newbgsx.value.fields[newKey] = newField;
			zdoption.value.push({label: newField.name,value: newKey});
			syncOpenQueryFields();
		};

		// 删除字段
		const removeField = (key) => {
			delete newbgsx.value.fields[key];
			zdoption.value = zdoption.value.filter(opt => opt.value !== key);
			syncOpenQueryFields();
		};
		
		//获取字段名
		const generateFieldKey = () => {
			const keys = Object.keys(newbgsx.value.fields);
			const maxIndex = keys.reduce((max, k) => {
				const num = parseInt(k.replace('K', ''));
				return num > max ? num : max;
			}, -1);
			return `K${maxIndex + 1}`;
		};
		
		const syncOpenQueryFields = () => {
			newbgsx.value.kfcx = Object.keys(newbgsx.value.fields);
		};

		const createNewField = (key) => {
			return {
            	type: "text",
            	placeholder: "请输入",
            	color: '#000000',
            	required: false,
            	max: 1,
            	size: 10,
				name: key,
				edituser: [],
				conditions: {},
				placeholder: `请输入${key}`
			};
		};

		//修改字段名时同步更新选项
		const zdjt = (k) => {
			zdoption.value = Object.keys(newbgsx.value.fields).map(k => ({
				label: newbgsx.value.fields[k].name,
				value: k
			}));
			newbgsx.value.fields[k].placeholder = '请输入' + newbgsx.value.fields[k].name;
			syncOpenQueryFields();
		};
		
		// 添加联表查询
		const addglField = () => {
			newbgsx.value.dblcxx.push({order: 1, id: '', title: ''});
		};

		// 删除联表查询项
		const delglField = (index) => {
			if (newbgsx.value.dblcxx.length > 0) {
				newbgsx.value.dblcxx.splice(index, 1);
			}
		};

		// 联表下拉选择变化时，检查是否有重复项
		const fieldchange = (index) => {
			const selectedId = newbgsx.value.dblcxx[index].id;
			const duplicate = newbgsx.value.dblcxx.some((item, idx) => idx !== index && item.id === selectedId);
			if (duplicate) {
				newbgsx.value.dblcxx[index].id = 0;
				ElMessage.error('此表已选，请选其他表！');
			}
			//项目表名自动填充
			newbgsx.value.dblcxx[index].title = xmlist.value.find(item => item.value == selectedId)?.text || '';
		};

		//字段类型变化时，如果是身份证识别要检查sfzoptions
		const lxchang = (e) => {
			let k = at.value;
			if (e == 'idcard' && typeof newbgsx.value.fields[k].sfzoptions === 'undefined') {
				newbgsx.value.fields[k].sfzoptions = {name: '',sex: '',mz: '',day: '',ade: '',old: ''};
			}
			if(e == 'subtable' && !Array.isArray(newbgsx.value.fields[k].zboptions)) {
				newbgsx.value.fields[k].zboptions = [];
			}
			newbgsx.value.fields[k].color = newbgsx.value.fields[k].color || '#000000';
		};
		
		//关闭弹窗
		const closeDialog = () => {
			emit('update:dialog-visible', false); // 通知父组件更新状态
		};
		
		// 时间校验逻辑
		const isTimeInvalid = (start, end) => {
			const isDefaultDate = (time) => time === '0001-01-01T00:00:00Z';
			if (!start || !end || isDefaultDate(start) || isDefaultDate(end)) return false;
			return new Date(start) > new Date(end);
		}
		
		// 校验重复项方法
		const checkDuplicatesBeforeSubmit = () => {
			let hasEmpty = false;
			const idSet = new Set();
			const hasDuplicate = newbgsx.value.dblcxx.some(item => {
				if (!item.id || !item.title) {
					hasEmpty = true; // 标记空项，但继续检查其他项
					return false;    // 不终止循环
				}
				if (idSet.has(item.id)) return true; // 发现重复，立即终止
				idSet.add(item.id);
				return false;
			});
			return { duplicate: hasDuplicate, empty: hasEmpty };
		}
		
		// 多表联查校验逻辑
		const validateMultiTable = (dblc, dblcxx) => {
			if (!dblc) return null; // 无需校验
			if (!dblcxx?.length) return '多表联查选项为空！';
			const { duplicate, empty } = checkDuplicatesBeforeSubmit();
			if (duplicate || empty) return '多表联查错误，有重复或空白项目！';
			return null;
		}
		
		//添加子表字段
		const addzbRow = (k) => {
			if (newbgsx.value.fields && newbgsx.value.fields[k]) {
				if (!Array.isArray(newbgsx.value.fields[k].zboptions)) {
					newbgsx.value.fields[k].zboptions = [];
				}
				console.log(newbgsx.value.fields[k].zboptions);
				newbgsx.value.fields[k].zboptions.push({key: '', lx: 'text', xx: '', bt: true});
			}
		}
		
		//删除子表字段
		const delzbRow = (k, index) => {
			if (!Array.isArray(newbgsx.value.fields[k].zboptions) || newbgsx.value.fields[k].zboptions.length === 0) {
				ElMessage.error('子表为空');
				return;
			}
			if (index >= 0 && index < newbgsx.value.fields[k].zboptions.length) {
				newbgsx.value.fields[k].zboptions.splice(index, 1);
			} else {
				console.error(`无法删除索引为${index}的选项，因为索引超出范围或数组为空。`);
			}
		}
		
        //联动选择表，获取该表字段返回：{lable:'', value: ''}
        const kbchange = async(id) => {
            if(id){
                const res = await getbgsxapi({id: Number(id)});
                kboption.value = res.fields;
            }
        }
        
		// 添加审批步骤
		const addProcessStep = () => {
			const newStep = {
				step: newbgsx.value.processConfig.length + 1,
				name: `步骤${newbgsx.value.processConfig.length + 1}`,
				approverId: null,
				mode: "sequential"
			};
			newbgsx.value.processConfig.push(newStep);
		};

		// 删除审批步骤
		const removeProcessStep = (index) => {
			newbgsx.value.processConfig.splice(index, 1);
			newbgsx.value.processConfig.forEach((step, idx) => {
				step.step = idx + 1;
			});
		};
		
		// 逻辑显示
        const getFieldType = (fieldKey) => {
            let type = newbgsx.value.fields[fieldKey]?.type || '';
            if(!type || !['radio', 'selecty'].includes(type)) return false;
            return true;
        };
        
        const getFieldOptions = (fieldKey) => {
            const options = newbgsx.value.fields[fieldKey]?.options;
            return options ? options.split('/') : [];
        };
        
        //公式设置追加到输入框
        const fillIndex = (index) => {
            newbgsx.value.fields[at.value].options += index;
        }
    							
		return {
		    getFieldType, getFieldOptions, fillIndex, jsonkeys,
		    addProcessStep,
		    removeProcessStep,
		    kboption,
		    kbchange,
			addzbRow,
			delzbRow,
			zblx,
			xmid,
			isTimeInvalid,
			checkDuplicatesBeforeSubmit,
			validateMultiTable,
			formRef,
			closeDialog,
			initFormData,
			addglField,
			delglField,
			fieldchange,
			lxchang,
			newbgsx,
			rules,
			submitForm,
			useroption: [{value: 'username',label: '用户名'},{value: 'name',label: '姓名'},{value: 'mobile',label: '手机号'}],
			addbgsxapi,
			handleUpdate,
			delbgsx,
			userform,
			zdoption,
			at,
			uploadUrl,
			activeName,
			processFieldOptions,
			addField,
			removeField,
			generateFieldKey,
			syncOpenQueryFields,
			createNewField,
			qtxsoption: ['全开放', '登录可见', '指定填报员', '管理员'],
			zdjt,
			lx,
			addDateSlot, addTimeSlot, addDateTimeSlot, removeDateTimeSlot,
			removeDateSlot, removeTimeSlot
		};
	},
	
	template: ` 
<el-form v-if="xmid" :model="newbgsx" :rules="rules" ref="formRef" label-position="top">
	<el-tabs v-model="activeName">
		<el-tab-pane label="基本设置" name="first">
            <el-row :gutter="20" style="width:100%">
                <el-col :span="12">
                    <el-form-item label="查询名称" prop="formname" required>
                    	<el-input v-model.trim="newbgsx.formname" placeholder="输入查询名称" clearable />
                    </el-form-item>
                </el-col>
            	<el-col :span="12">
                    <el-form-item label="前台显示" prop="qtxs" required>
                        <el-radio-group v-model="newbgsx.qtxs" placeholder="请选择前台显示条件">
                            <el-radio v-for="item in qtxsoption" :key="item" :label="item" :value="item"></el-radio>
        				</el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="width:100%">
            	<el-col :span="12">
                    <el-form-item label="查询条件【用户要输入什么来查询】" prop="cxtj">
                    	<el-select v-model="newbgsx.cxtj" multiple placeholder="请选择" style="width: 100%" clearable>
                    		<el-option v-for="item in zdoption" :key="item.value" :label="item.label" :value="item.value" />
                    	</el-select>
                    </el-form-item>
            	</el-col>
            	<el-col :span="12">
                    <el-form-item label="显示列【查询和填报显示哪些内容】" prop="kfcx" required>
                    	<el-select v-model="newbgsx.kfcx" multiple placeholder="请选择" style="width: 100%" clearable>
                    		<el-option v-for="item in zdoption" :key="item.value" :label="item.label" :value="item.value" />
                    	</el-select>
                    	<div v-if="newbgsx.kfcx.length > 0">查询结果按勾选顺序排序</div>
                    </el-form-item>
            	</el-col>
            </el-row>
			
            <el-row :gutter="20" style="width:100%">
            	<el-col :span="12">
                    <el-form-item label="开放填报【哪些字段内容可修改】" prop="kftb">
                    	<el-select v-model="newbgsx.kftb" multiple placeholder="请选择" style="width: 100%" clearable>
                    		<el-option v-for="item in zdoption" :key="item.value" :label="item.label" :value="item.value" />
                    	</el-select>
                    </el-form-item>
            	</el-col>
            	<el-col :span="12">
                    <el-form-item label="排序字段【表格哪些列可排序】" prop="pxzd">
                    	<el-select v-model="newbgsx.pxzd" multiple placeholder="请选择" style="width: 100%" clearable>
                    		<el-option v-for="item in zdoption" :key="item.value" :label="item.label" :value="item.value" />
                    	</el-select>
                    </el-form-item>
            	</el-col>
            </el-row>
			
			<el-row :gutter="20" style="width:100%">
				<el-col :span="12">
					<el-form-item label="保密关联查询【选择查询条件要匹配的用户表字段】" prop="glcx">
						<el-select v-model="newbgsx.glcx" placeholder="选择关联字段" style="width: 100%" clearable>
							<el-option v-for="item in useroption" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">    
					<el-form-item label="页面模板" prop="templateId">
						<el-select v-model="newbgsx.templateId" placeholder="选择页面模板" style="width: 100%" clearable>
							<el-option v-for="item in mblist" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">      
					<el-form-item label="开始时间【什么时候开始查询】" prop="starttime">
						<el-date-picker v-model="newbgsx.starttime" type="datetime" placeholder="选择开始时间" style="width: 100%" />
					</el-form-item>
				</el-col>
				<el-col :span="12">      
					<el-form-item label="结束时间【什么时候结束查询】" prop="endtime">
						<el-date-picker v-model="newbgsx.endtime" type="datetime" placeholder="选择结束时间" style="width: 100%" />
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="3" v-show="!newbgsx.dblc">
					<el-form-item label="模糊查询" prop="mhcx">
						<el-switch v-model="newbgsx.mhcx" />
					</el-form-item>
				</el-col>
				
				<el-col :span="3" v-show="!newbgsx.dblc">
					<el-form-item label="全部填写" prop="sfbt">
						<el-switch v-model="newbgsx.sfbt"/>
					</el-form-item>
				</el-col>
				
				<el-col :span="3" v-show="!newbgsx.dblc">
					<el-tooltip content="查询结果使用横向表格显示" placement="top">
						<el-form-item label="结果横排" prop="jghp">
							<el-switch v-model="newbgsx.jghp"/>
						</el-form-item>
					</el-tooltip>
				</el-col>
				
				<el-col :span="3">
					<el-tooltip content="手机端多条查询结果时显示序号" placement="top">
						<el-form-item label="显示序号" prop="xsxh">
							<el-switch v-model="newbgsx.xsxh" />
						</el-form-item>
					</el-tooltip>
				</el-col>
				
				<el-col :span="3" v-show="!newbgsx.dblc">
					<el-form-item label="过滤空值" prop="glkz">
						<el-switch v-model="newbgsx.glkz" />
					</el-form-item>
				</el-col>
				
				<el-col :span="3">
					<el-tooltip content="可对多个表格进行联合查询" placement="top">
						<el-form-item label="多表联查" prop="dblc">
							<el-switch v-model="newbgsx.dblc"/>
						</el-form-item>
					</el-tooltip>
				</el-col>
				
                <el-col :span="3">
                    <el-tooltip content="启用后每个用户只能提交一条数据" placement="top">
                        <el-form-item label="唯一填报" prop="wytb">
                            <el-switch  v-model="newbgsx.wytb"/>
                        </el-form-item>
                    </el-tooltip>
                </el-col>
                
                <el-col :span="3">
                    <el-tooltip content="启用后用户可在查询后锁定数据，不让他人查询" placement="top">
                        <el-form-item label="锁定查询" prop="suoding">
                            <el-switch  v-model="newbgsx.suoding"/>
                        </el-form-item>
                    </el-tooltip>
                </el-col>
			</el-row>
			
			<el-form-item label="查询须知" prop="remark">
				<kzhedit v-model="newbgsx.remark" :option="{url: '',name: 'file',path: 'blog'}" style="width:100%;" />
			</el-form-item>
		</el-tab-pane>
		
		<el-tab-pane label="高级设置" name="fourth">
			<template v-if="newbgsx.dblc">
				<h4 class="text-center" style="color: #c76395">多表联查，可左右滑动填写</h4>
				<div class="scroll-x">
					<el-form-item label="显示顺序" prop="dblcxx">
						<div style="height: 300px; width: 1200px">
							<template v-for="(item, k) in newbgsx.dblcxx" :key="k">
								<el-row :gutter="10">
									<el-col :span="4">
										<el-input-number v-model="newbgsx.dblcxx[k].order" :min="1" :max="100" placeholder="顺序" />
									</el-col>
									<el-col :span="9">
										<el-select v-model="newbgsx.dblcxx[k].id" placeholder="关联表" @change="fieldchange(k)" clearable>
											<el-option v-for="item in xmlist" :key="item.value" :label="item.label" :value="item.value" />
										</el-select>
									</el-col>
									<el-col :span="8">
										<el-input v-model.trim="newbgsx.dblcxx[k].title" placeholder="标题" />
									</el-col>
									<el-col :span="3">
										<el-button size="small" type="danger" @click="delglField(k)">删除</el-button>
									</el-col>
								</el-row>
							</template>
							<el-button class="mt-2" size="small" @click="addglField">添加表</el-button>
						</div>
					</el-form-item>
				</div>
			</template>

			<template v-else>
				<el-form-item label="字段设置" prop="fields" required>
					<el-row :gutter="20" v-for="(item, k) in newbgsx.fields" :key="k">
						<el-col :span="19">
							<el-input v-model.trim="newbgsx.fields[k].name" @change="zdjt(k)" placeholder="字段名称">
								<template #append>{{ k }}</template>
							</el-input>
						</el-col>
						<el-col :span="5">
							<el-button size="small" type="danger" @click="removeField(k)">删除</el-button>
						</el-col>
					</el-row>
					<el-button class="mt-2" size="small" @click="addField">添加字段</el-button>
				</el-form-item>

				<h4 class="text-center" style="color: #0055ff">字段类型(先选数据列，再选类型)</h4>

				<el-row :gutter="20">
					<el-col :span="16">
						<el-form-item label="数据列" prop="at">
							<el-select v-model="at" placeholder="选择数据列" clearable>
								<el-option v-for="item in zdoption" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" v-if="at">
						<el-form-item label="类型" prop="type">
							<el-select v-model="newbgsx.fields[at].type" placeholder="选择类型" @change="lxchang" clearable>
								<el-option v-for="item in lx" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<template v-if="at">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="名称" prop="name">
								<el-input v-model.trim="newbgsx.fields[at].name" placeholder="字段名称" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="提示文字" prop="placeholder">
								<el-input v-model.trim="newbgsx.fields[at].placeholder" placeholder="提示文字" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="帮助说明" prop="help">
								<el-input v-model.trim="newbgsx.fields[at].help" type="textarea" placeholder="帮助说明" />
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="!newbgsx.dblc && newbgsx.fields[at].type =='sczs'">
							<el-form-item label="证书模板【批量生成证书图片】" prop="zsmb">
								<el-select v-model="newbgsx.zsmb" placeholder="选择证书模板" style="width: 100%" clearable>
									<el-option v-for="item in zsmblist" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="8" v-if="!['image','multiimage','file', 'video', 'multifile'].includes(newbgsx.fields[at].type)">
							<el-form-item label="默认值" prop="default">
								<el-input v-model.trim="newbgsx.fields[at].default" placeholder="设置默认值" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="必填" prop="required">
								<el-switch v-model="newbgsx.fields[at].required" />
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="颜色" prop="color">
								<el-color-picker v-model="newbgsx.fields[at].color" />
							</el-form-item>
						</el-col>
					
						<el-col :span="8" v-if="['image','multiimage'].includes(newbgsx.fields[at].type)">
							<el-form-item label="图片压缩" prop="options">
								<el-input v-model="newbgsx.fields[at].options" placeholder="宽高用/分割，如300/200" />
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="['multiimage', 'multifile', 'video'].includes(newbgsx.fields[at].type)">
							<el-form-item prop="max" label="数量">
								<el-input-number v-model="newbgsx.fields[at].max" :min="1" />
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="['select','muselect', 'radio', 'checkbox'].includes(newbgsx.fields[at].type)">
							<el-form-item label="选项" prop="options">
								<el-input type="textarea" v-model="newbgsx.fields[at].options" placeholder="用/分割选项" />
							</el-form-item>
						</el-col>
                        <template v-if="newbgsx.fields[at].type =='randomkey'" style="margin-top:20px;width:100%;">
                            <el-col :span="5">
                                <el-form-item label="生成规则" prop="options">
                                    <el-select v-model="newbgsx.fields[at].options" placeholder="选择密钥生成规则" clearable>
                                        <el-option label="大小写字母数字" value="dxxzmsz"></el-option>
                                        <el-option label="大小写字母" value="dxxzm"></el-option>
                                        <el-option label="大写字母" value="dxzm"></el-option>
                                        <el-option label="小写字母" value="xxzm"></el-option>
                                        <el-option label="随机数字" value="sz"></el-option>
                                        <el-option label="当日时间+3位数字" value="date"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <el-form-item label="生成位数" prop="max">
                                    <el-input-number v-model="newbgsx.fields[at].max" :min="2" :max="50" label="生成位数"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </template>
                        <el-col :span="8" v-if="newbgsx.fields[at].type == 'rowcalc'">
                            <template v-for="(item, index) in newbgsx.fields" :key="index">
                                <el-tag v-if="item.type == 'number'" @click="fillIndex(index)">{{ index + '-' + item.name }}</el-tag>
                            </template>
                            <el-form-item label="计算公式" prop="options">
                                <el-input v-model="newbgsx.fields[at].options" autosize type="text" placeholder="公式支持加减乘除，支持括号，如(K1+K2)/3"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="newbgsx.fields[at].type == 'stringconcat'">
                            <template v-for="(item, index) in newbgsx.fields" :key="index">
                                <el-tag v-if="!jsonkeys.includes(item.type)" @click="fillIndex(index)">{{ index + '-' + item.name }}</el-tag>
                            </template>
                            <el-form-item label="拼接规则" prop="options">
                                <el-input v-model="newbgsx.fields[at].options" autosize type="text" placeholder="拼接规则，用双加号++连接，如K1++K2，中间也可连接其他字符，如K1++年++K2++月"></el-input>
                            </el-form-item>
                        </el-col>
					</el-row>
					
                    <el-form-item label="可修改用户，不选则不限，用于多人填一条数据" prop="edituser">
						<el-select multiple v-model="newbgsx.fields[at].edituser" placeholder="选择允许修改的用户" style="width: 100%" clearable>
							<el-option v-for="item in tbyoptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					
					<!--子表字段-->
					<template v-if="at && newbgsx.fields[at].type =='subtable'">
						<el-col :span="24">
							<div style="display: flex; justify-content: center;margin-top:10px;">
							  <span style="color: blue;">子表字段设置</span>
							</div>
						</el-col>
						<el-row v-for="(item, index) in newbgsx.fields[at].zboptions" :key="index" style="margin-top:20px;width:100%;">
							<el-col :span="6">
								<el-form-item label="字段" prop="key">
									<el-input v-model="newbgsx.fields[at].zboptions[index].key" placeholder="子表列名"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item label="类型" prop="lx">
									<el-select v-model="newbgsx.fields[at].zboptions[index].lx" placeholder="类型" clearable>
										<el-option v-for="(item, key) in zblx" :key="key" :label="item" :value="key"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="选项" prop="xx">
									<el-input v-model="newbgsx.fields[at].zboptions[index].xx" placeholder="选项用/分割"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-form-item label="必填" prop="bt">
									<el-switch v-model="newbgsx.fields[at].zboptions[index].bt"></el-switch>
								</el-form-item>
							</el-col>
							<el-col :span="3">
								<el-button type="danger" size="small" @click="delzbRow(at, index)">删除</el-button>
							</el-col>
						</el-row>
						<div style="text-align: center;margin-top:10px;">
							<el-button type="success" size="small" @click="addzbRow(at)">添加一行</el-button>
						</div>
					</template>
			
					<template v-if="newbgsx.fields[at].type === 'idcard'">
						<h4 class="text-center" style="color: #c76395">拍摄身份证后识别内容，并自动填写到对应字段</h4>
						<el-form-item label="身份证识别字段" prop="sfzoptions">
							<el-row :gutter="10" style="width:100%">
								<el-col :span="8">
									<el-select v-model="newbgsx.fields[at].sfzoptions.name" placeholder="姓名" clearable>
										<el-option v-for="item in zdoption" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-col>
								
								<el-col :span="8">
									<el-select v-model="newbgsx.fields[at].sfzoptions.sex" placeholder="性别" clearable>
										<el-option v-for="item in zdoption" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-col>
								
								<el-col :span="8">
									<el-select v-model="newbgsx.fields[at].sfzoptions.mz" placeholder="民族" clearable>
										<el-option v-for="item in zdoption" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-col>
								
								<el-col :span="8">
									<el-select v-model="newbgsx.fields[at].sfzoptions.day" placeholder="出生日期" clearable>
										<el-option v-for="item in zdoption" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-col>
								
								<el-col :span="8">
									<el-select v-model="newbgsx.fields[at].sfzoptions.ade" placeholder="住址" clearable>
										<el-option v-for="item in zdoption" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-col>
								
								<el-col :span="8">
									<el-select v-model="newbgsx.fields[at].sfzoptions.old" placeholder="周岁" clearable>
										<el-option v-for="item in zdoption" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-col>
							</el-row>
						</el-form-item>
					</template>
					
                    <!--联动下拉，选择现在项目，设置字段和联动级-->
                    <!--kbtable: '',  //引用表-->
                    <!--kbcxcol: '',  //返回列-->
                    <!--kbcxz: '',  //联动级数-->
                    <!--kbfhcol: '',  //当前级-->
                    <el-row v-if="at && Object.keys(xmlist).length > 0 && newbgsx.fields[at].type == 'linkselect'" style="margin-top:20px;width:100%;">
                        <el-col :span="6">
                            <el-form-item label="联动表" prop="kbtable">
                                <el-select v-model="newbgsx.fields[at].kbtable" placeholder="引用哪个表" style="width:100%;" @change="kbchange" clearable>
                                    <template v-for="(item, key) in xmlist" :key="item.value">
                                        <el-option v-if="item.label != newbgsx.formname" :label="item.label" :value="item.value"></el-option>
                                    </template>
                                </el-select>
                                <span style="color: #779cf1;">从哪个表找？</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="返回列" prop="kbcxcol">
                                <el-select v-model="newbgsx.fields[at].kbcxcol" placeholder="返回哪列值" style="width:100%;" clearable>
                                    <el-option v-for="(item, key) in kboption" :key="key" :label="item.name" :value="key"></el-option>
                                </el-select>
                                <span style="color: #779cf1;">返回哪列的数值？</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="总级数" prop="kbcxz">
                                <el-input-number v-model="newbgsx.fields[at].kbcxz" :min="2" :max="5" label="共有多少级"></el-input-number>
                                <span style="color: #779cf1;">一共有多少级？</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="当前级" prop="kbfhcol">
                                <el-input-number v-model="newbgsx.fields[at].kbfhcol" :min="1" :max="5" label="当前是第几级"></el-input-number>
                                <span style="color: #779cf1;">当前是第几级？</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="逻辑显示【当某个字段值等于指定值时，显示或隐藏本字段。】" prop="conditions">
                        <div style="border: 1px solid #ebeef5; padding: 10px; border-radius: 4px;width:100%;">
                            <el-row :gutter="10">
                                <el-col :span="8">
                                    <el-select v-model="newbgsx.fields[at].conditions.field" placeholder="监听字段" style="width: 100%">
                                    <el-option v-for="item in zdoption" :key="item.value" :label="item.label" :value="item.value" :disabled="newbgsx.fields[at].conditions.field == at"/>
                                    </el-select>
                                    <span style="color: #779cf1;">哪个字段变化时？</span>
                                </el-col>
                            
                                <el-col :span="11">
                                    <template v-if="getFieldType(newbgsx.fields[at].conditions.field)">
                                        <el-select v-model="newbgsx.fields[at].conditions.value" multiple placeholder="选择值" style="width: 100%">
                                            <el-option v-for="(opt, optIndex) in getFieldOptions(newbgsx.fields[at].conditions.field)" :key="optIndex" :label="opt" :value="opt"/>
                                        </el-select>
                                    </template>
                                   <el-input-tag v-else v-model="newbgsx.fields[at].conditions.value" placeholder="匹配值" style="width: 100%" />
                                    <span style="color: #779cf1;">字段值是多少？多个值时只需要满足其一</span>
                                </el-col>
                                
                                <el-col :span="3">
                                    <el-select v-model="newbgsx.fields[at].conditions.action" style="width: 100%">
                                        <el-option label="显示" value="show" />
                                        <el-option label="隐藏" value="hide" />
                                    </el-select>
                                    <span style="color: #779cf1;">显示还是隐藏？</span>
                                </el-col>
                            
                                <el-col :span="2">
                                    <el-button @click="newbgsx.fields[at].conditions = {}" type="danger" size="small" style="width: 100%">删除</el-button>
                                    <span style="color: #779cf1;text-align:center;">操作</span>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form-item>
				</template>
                <el-form-item label="填报员" prop="tby">
					<el-select multiple v-model="newbgsx.tby" placeholder="选择填报员" style="width: 100%" clearable>
						<el-option v-for="item in tbyoptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="Word模板" prop="wordmb">
					<el-upload v-model="newbgsx.wordmb" :action="uploadUrl" :limit="1" accept=".docx">
						<el-button type="primary">点击上传</el-button>
					</el-upload>
				</el-form-item>
			</template>
		</el-tab-pane>
		<el-tab-pane label="流程设置" name="process">
			<el-form-item label="审批流程配置" prop="processConfig">
				<div style="width:100%">
					<div v-for="(step, index) in newbgsx.processConfig" :key="index" style="width:100%;margin-top:15px;">
						<el-row :gutter="20" align="middle" style="width:100%;">
							<el-col :span="1">{{ step.step }}</el-col>

							<el-col :span="22">
								<el-row :gutter="16">
									<el-col :span="10">
										<el-input v-model="step.name" placeholder="输入步骤名称" />
									</el-col>

									<el-col :span="11">
										<el-select v-model="step.approverId" filterable placeholder="选择审批人" clearable>
											<el-option v-for="user in shyoptions" :key="user.id" :label="user.label" :value="user.value">
											</el-option>
										</el-select>
									</el-col>

									<el-col :span="3">
										<el-button type="danger" plain @click="removeProcessStep(index)">移除</el-button>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</div>
                    <div class="mt-1">
                        <el-button type="primary" @click="addProcessStep">添加审批步骤</el-button>
                    </div>
				</div>
			</el-form-item>
		</el-tab-pane>
		
		<el-tab-pane label="预约配置" name="reservation">
		    <h4 class="text-center" style="color: #c76395;margin-top:-1px;">预约有3种模式，每个时间段可以设置可预约人数：<br>
    		    <p>1. 动态模式：最大提前天数+每天固定时间；</p>
    		    <p>2. 静态模式：指定日期+每天固定时间；</p>
    		    <p>3. 自定义模式：指定日期+指定时间。</p>
    		    <p>注意：未开启重复预约时，每人只能存在一个未过期的预约。</p>
		    </h4>
		    <el-row :gutter="20" align="middle" style="width:100%;">
                <el-col :span="6">
                	<el-form-item label="启用预约" prop="isReservation">
                		<el-switch v-model="newbgsx.isReservation" />
                	</el-form-item>
                </el-col>
                <el-col :span="6" v-if="newbgsx.isReservation">
                	<el-form-item label="重复预约" prop="reservation.allowMultiple">
                		<el-switch v-model="newbgsx.reservation.allowMultiple" />
                	</el-form-item>
                </el-col>
                <el-col :span="6" v-if="newbgsx.isReservation">
                    <el-form-item label="启用核销" prop="enableVerification">
                        <el-switch v-model="newbgsx.enableVerification" />
                        <span class="tip">启用后每个预约将生成唯一核销码</span>
                    </el-form-item>
                </el-col>
        	</el-row>
			<template v-if="newbgsx.isReservation">
				<!-- 模式选择 -->
				<el-form-item label="预约模式" prop="reservation.mode" required>
					<el-select v-model="newbgsx.reservation.mode">
						<el-option label="动态模式" value="dynamic" />
						<el-option label="静态模式" value="static" />
						<el-option label="自定义模式" value="custom" />
					</el-select>
				</el-form-item>

				<!-- 动态模式 -->
				<template v-if="newbgsx.reservation.mode === 'dynamic'">
					<el-form-item label="最大提前预约天数" prop="reservation.maxDays" required>
						<el-input-number v-model="newbgsx.reservation.maxDays" :min="1" :precision="0" />
					</el-form-item>
				</template>

				<!-- 静态/自定义模式 -->
                <template v-if="['static','custom'].includes(newbgsx.reservation.mode)">
                    <el-form-item :label="'允许日期（'+newbgsx.reservation.mode === 'static' ? '全局时段' : '自定义时段'+'）'" required>
                        <div v-for="(dateSlot, index) in newbgsx.reservation.allowedDates" :key="index">
                            <div class="date-slot-item">
                                <el-date-picker v-model="dateSlot.date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" class="mr-2"/>
                                <!-- 自定义模式添加时段配置 -->
                                <template v-if="newbgsx.reservation.mode === 'custom'">
                                    <div v-for="(timeSlot, tIndex) in dateSlot.timeSlots" :key="tIndex" class="time-slot-item">
                                        <el-time-picker v-model="timeSlot.start" format="HH:mm" placeholder="开始时间" value-format="HH:mm" class="mr-2"/>
                                        <el-time-picker v-model="timeSlot.end" format="HH:mm" placeholder="结束时间" value-format="HH:mm" class="mr-2"/>
                                        <el-input-number v-model="timeSlot.maxPeople" :min="1" placeholder="最大人数" class="mr-2"/>
                                        <el-button @click="removeDateTimeSlot(index, tIndex)" type="danger" size="small">删除时段</el-button>
                                    </div>
                                    <el-button @click="addDateTimeSlot(index)" type="primary" size="small">添加时段</el-button>
                                </template>
                                <el-button @click="removeDateSlot(index)" type="danger" size="small">删除日期</el-button>
                            </div>
                        </div>
                        <el-button @click="addDateSlot" type="primary" size="small">添加日期</el-button>
                    </el-form-item>
                </template

				<!-- 非自定义模式全局时段 -->
				<el-form-item v-if="newbgsx.reservation.mode != 'custom'" label="时间段和人数配置" prop="reservation.timeSlots" required>
					<div v-for="(slot, index) in newbgsx.reservation.timeSlots" :key="index" class="time-slot-item">
						<el-time-picker v-model="slot.start" format="HH:mm" placeholder="开始时间" value-format="HH:mm"
							class="mr-2" />
						<el-time-picker v-model="slot.end" format="HH:mm" placeholder="结束时间" value-format="HH:mm"
							class="mr-2" />
						<el-input-number v-model="slot.maxPeople" :min="1" placeholder="最大人数" class="mr-2" />
						<el-button @click="removeTimeSlot(index)" type="danger" size="small">删除</el-button>
					</div>
					<el-button @click="addTimeSlot" type="primary" size="small">添加时段</el-button>
				</el-form-item>
			</template>
		</el-tab-pane>
		
	</el-tabs>
	
	<el-row justify="center">
		<el-col :span="8" style="text-align: center;margin: 20px;">
			<el-button type="primary" size="large" style="margin-right:20px" @click="submitForm()">确认</el-button>
			<el-button @click="closeDialog()" size="large">取消</el-button>
		</el-col>
	</el-row>
</el-form>
	`
}